<template>
  <el-table
    v-if="props.list.length > 0"
    :data="props.list"
    style="width: 100%"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
  >
    <el-table-column label="序号" min-width="60" fixed="left">
      <template #default="scope">
        {{ (scope.$index + 1).toString() }}
      </template>
    </el-table-column>
    <el-table-column prop="vehicleType" label="车辆类型">
      <template #default="scope">
        {{
          formattingArrayOptions(vehicleTypeOptions, scope.row.vehicleType, "车辆类型") ||
          "--"
        }}
      </template>
    </el-table-column>
    <el-table-column prop="freeTime" label="免费时长(分钟)" min-width="120" />
    <el-table-column label="日期类型">
      <template #default="scope">
        {{
          formattingArrayOptions(dateTypeOptions, scope.row.dateType, "免费时长(分钟)") ||
          "--"
        }}
      </template>
    </el-table-column>
    <el-table-column label="收费时间" min-width="120">
      <template #default="scope">
        {{ scope.row.startTime }}-{{ scope.row.endTime }}
      </template>
    </el-table-column>
    <el-table-column label="收费方式">
      <template #default="scope">
        {{ scope.row.method == 1 ? "阶梯按时" : "定额按次" }}
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="计费规则" min-width="260" />
    <el-table-column label="时段封顶(元)" min-width="140">
      <template #default="scope">
        <span v-if="scope.row.periodMax == 0">不封顶</span>
        <span v-else>{{ scope.row.periodMax }}</span>
      </template>
    </el-table-column>
    <el-table-column label="日封顶(元)" min-width="140">
      <template #default="scope">
        <span v-if="scope.row.max == 0">不封顶</span>
        <span v-else>
          {{ scope.row.max }}
          <span v-if="scope.row.maxType > 0">
            （{{
              formattingArrayOptions(maxTypeOptions, scope.row.maxType, "日封顶(元)") ||
              "--"
            }}）
          </span>
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="code" label="操作" min-width="100" fixed="right">
      <template #default="scope">
        <el-button
          @click="editData(scope.row)"
          type="primary"
          size="small"
          link
          style="color: #007aff"
          >编辑
        </el-button>
        <el-button
          @click="deleteData(scope.$index)"
          type="primary"
          size="small"
          link
          style="color: #007aff"
          >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {
  headerCellStyle,
  cellStyle,
  dateTypeOptions,
  maxTypeOptions,
  vehicleTypeOptions,
} from "../types";
import { formattingArrayOptions } from "../../../../../utils/common";
import { watch } from "vue";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits(["editData", "deleteData"]);

const editData = (record) => {
  emits("editData", record);
};
const deleteData = (index) => {
  emits("deleteData", index);
};
watch(
  () => props.list,
  (val) => {
    console.log("val", val);
  }
);
</script>
